<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zombie Shooter Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #333;
      font-family: Arial, sans-serif;
    }
    #game-container {
      position: relative;
      width: 800px;
      height: 600px;
      margin: 20px auto;
      background: url('https://img.freepik.com/free-vector/cemetery-night-landscape-old-graveyard-with-fence_107791-2658.jpg') no-repeat;
      background-size: cover;
      border: 3px solid #222;
      overflow: hidden;
      cursor: crosshair;
    }
    .zombie {
      position: absolute;
      width: 80px;
      height: 120px;
      background: url('https://img.freepik.com/free-vector/zombie-cartoon-character-transparent-background_1308-75390.jpg') no-repeat;
      background-size: contain;
      bottom: 20px;
      transition: transform 0.2s;
    }
    .bullet {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: yellow;
      border-radius: 50%;
    }
    .blood {
      position: absolute;
      width: 50px;
      height: 50px;
      background: url('https://img.freepik.com/free-vector/red-blood-splatter_1048-7965.jpg') no-repeat;
      background-size: contain;
      z-index: 100;
      opacity: 0.8;
    }
    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 24px;
      color: white;
      font-weight: bold;
      text-shadow: 2px 2px 4px #000;
    }
    #health {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
      color: white;
      font-weight: bold;
      text-shadow: 2px 2px 4px #000;
    }
    #game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.7);
      color: red;
      padding: 20px;
      border-radius: 10px;
      font-size: 36px;
      font-weight: bold;
      display: none;
    }
    #restart-btn {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="score">Score: 0</div>
    <div id="health">Health: 100</div>
    <div id="game-over">
      GAME OVER
      <button id="restart-btn">Restart</button>
    </div>
  </div>

  <script>
    const gameContainer = document.getElementById('game-container');
    const scoreElement = document.getElementById('score');
    const healthElement = document.getElementById('health');
    const gameOverElement = document.getElementById('game-over');
    const restartBtn = document.getElementById('restart-btn');

    let score = 0;
    let health = 100;
    let gameRunning = true;
    let zombies = [];
    let bullets = [];
    let zombieSpeed = 1;
    let zombieSpawnRate = 1500;
    let lastZombieSpawn = 0;

    function createZombie() {
      if (!gameRunning) return;
      
      const zombie = document.createElement('div');
      zombie.className = 'zombie';
      zombie.style.left = Math.random() * (gameContainer.offsetWidth - 80) + 'px';
      gameContainer.appendChild(zombie);
      
      const zombieObj = {
        element: zombie,
        x: parseFloat(zombie.style.left),
        y: gameContainer.offsetHeight - 120,
        speed: zombieSpeed * (0.5 + Math.random()),
        health: 100
      };
      
      zombies.push(zombieObj);
    }

    function createBullet(x, y) {
      const bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = x + 'px';
      bullet.style.top = y + 'px';
      gameContainer.appendChild(bullet);
      
      const bulletObj = {
        element: bullet,
        x: x,
        y: y,
        speed: 10
      };
      
      bullets.push(bulletObj);
    }

    function createBloodSplatter(x, y) {
      const blood = document.createElement('div');
      blood.className = 'blood';
      blood.style.left = x + 'px';
      blood.style.top = y + 'px';
      gameContainer.appendChild(blood);
      
      setTimeout(() => {
        blood.remove();
      }, 1000);
    }

    function updateGame() {
      if (!gameRunning) return;
      
      // Spawn zombies
      const currentTime = Date.now();
      if (currentTime - lastZombieSpawn > zombieSpawnRate) {
        createZombie();
        lastZombieSpawn = currentTime;
        
        // Increase difficulty over time
        zombieSpeed += 0.01;
        zombieSpawnRate = Math.max(500, zombieSpawnRate - 10);
      }
      
      // Update zombies
      for (let i = zombies.length - 1; i >= 0; i--) {
        const zombie = zombies[i];
        zombie.y -= zombie.speed;
        zombie.element.style.bottom = zombie.y + 'px';
        
        // Zombie reached the top
        if (zombie.y <= -120) {
          health -= 10;
          healthElement.textContent = `Health: ${health}`;
          zombie.element.remove();
          zombies.splice(i, 1);
          
          if (health <= 0) {
            gameOver();
          }
        }
      }
      
      // Update bullets
      for (let i = bullets.length - 1; i >= 0; i--) {
        const bullet = bullets[i];
        bullet.y -= bullet.speed;
        bullet.element.style.top = bullet.y + 'px';
        
        // Check for bullet-zombie collisions
        for (let j = zombies.length - 1; j >= 0; j--) {
          const zombie = zombies[j];
          const zombieRect = {
            x: zombie.x,
            y: zombie.y,
            width: 80,
            height: 120
          };
          
          if (bullet.x >= zombieRect.x && 
            bullet.x <= zombieRect.x + zombieRect.width &&
            bullet.y >= gameContainer.offsetHeight - zombieRect.y - zombieRect.height && 
            bullet.y <= gameContainer.offsetHeight - zombieRect.y) {
            
            // Hit zombie
            zombie.health -= 50;
            createBloodSplatter(bullet.x, bullet.y);
            bullet.element.remove();
            bullets.splice(i, 1);
            
            if (zombie.health <= 0) {
              score += 100;
              scoreElement.textContent = `Score: ${score}`;
              zombie.element.remove();
              zombies.splice(j, 1);
            }
            
            break;
          }
        }
        
        // Remove bullets that go off screen
        if (bullet.y < 0) {
          bullet.element.remove();
          bullets.splice(i, 1);
        }
      }
      
      requestAnimationFrame(updateGame);
    }

    function gameOver() {
      gameRunning = false;
      gameOverElement.style.display = 'block';
    }

    function restartGame() {
      // Clear all zombies and bullets
      zombies.forEach(zombie => zombie.element.remove());
      bullets.forEach(bullet => bullet.element.remove());
      zombies = [];
      bullets = [];
      
      // Reset game variables
      score = 0;
      health = 100;
      zombieSpeed = 1;
      zombieSpawnRate = 1500;
      
      // Update display
      scoreElement.textContent = `Score: ${score}`;
      healthElement.textContent = `Health: ${health}`;
      gameOverElement.style.display = 'none';
      
      // Restart game
      gameRunning = true;
      updateGame();
    }

    // Event listeners
    gameContainer.addEventListener('click', (e) => {
      if (!gameRunning) return;
      
      const rect = gameContainer.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      createBullet(x, y);
    });
    
    restartBtn.addEventListener('click', restartGame);
    
    // Start game
    updateGame();
  </script>
</body>
</html>